<template>
    <div class="left">
        <div class="left-top" :style="{ transform: scaleX === -1 ? 'scaleX(-1)' : 'none' }">
            <div
                :style="{ transform: scaleX === -1 ? 'scaleX(-1)' : 'none', textAlign: scaleX === -1 ? 'right' : 'left' }">
                {{ title }}</div>
        </div>
        <div class="left-bottom">
            <div ref="chartContainer" class="chart-container" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
    title: {
        type: String,
        default: '标题'
    },
    scaleX: {
        type: Number,
        default: 1
    },
    option: {
        type: Object,
        default: () => ({})
    }
});

const chartContainer = ref(null);
let chartInstance = null;
let timer = null;

// 1. 直接在组件内部定义 option
const data = [
    {
        icon: '/static/img/rank1.png',
        name: '工业机械',
        value: 13126,
        color: '#53D8FE',
        gradient: ['#53D8FE', '#3DE6C1']
    },
    {
        icon: '/static/img/rank2.png',
        name: '科技互联网',
        value: 38978,
        color: '#FFD14C',
        gradient: ['#FFD14C', '#FFB300']
    },
    {
        icon: '/static/img/rank3.png',
        name: '能源环保',
        value: 62849,
        color: '#3DE6C1',
        gradient: ['#3DE6C1', '#1DE9B6']
    }
];
const attaName = data.map(d => d.name);
const attaData = data.map(d => d.value);
const attaIcon = data.map(d => d.icon);
const attaColor = data.map(d => d.color);
const attaGradient = data.map(d => d.gradient || [d.color, d.color]);
const maxValue = Math.max(...attaData);

const option = {
    backgroundColor: 'rgba(0,0,0,0)',
    grid: {
        left: 60,
        right: 150,
        top: 20,
        bottom: 20,
        containLabel: false
    },
    xAxis: {
        type: 'value',
        min: 0,
        max: maxValue,
        splitLine: { show: false },
        axisLabel: { show: false },
        axisTick: { show: false },
        axisLine: { show: false }
    },
    yAxis: [
        {
            type: 'category',
            inverse: true,
            data: attaName,
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: {
                show: true,
                align: 'left',
                margin: 60,
                fontSize: 20,
                color: '#fff',
                padding: [0, 0, 20, 0],
                rich: {
                    icon1: {
                        height: 56,
                        width: 56,
                        align: 'left',
                        backgroundColor: { image: attaIcon[0] }
                    },
                    icon2: {
                        height: 56,
                        width: 56,
                        align: 'left',
                        backgroundColor: { image: attaIcon[1] }
                    },
                    icon3: {
                        height: 56,
                        width: 56,
                        align: 'left',
                        backgroundColor: { image: attaIcon[2] }
                    }
                },
                formatter: function (value, index) {
                    return `{icon${index + 1}|}  ${value}`;
                }
            }
        }
    ],
    series: [
        {
            type: 'bar',
            data: attaData.map((v, i) => ({
                value: v,
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0, y: 0, x2: 1, y2: 0,
                        colorStops: [
                            { offset: 0, color: attaGradient[i][0] },
                            { offset: 1, color: attaGradient[i][1] }
                        ]
                    },
                    borderRadius: 6,
                    shadowColor: 'rgba(255,255,255,0.5)',
                    shadowBlur: 8
                }
            })),
            barWidth: 8,
            z: 2,
            label: {
                show: true,
                position: 'right',
                fontSize: 20,
                fontWeight: 'bold',
                overflow: 'truncate',
                formatter: function (params) {
                    const colorKey = `val${params.dataIndex}`;
                    return `{${colorKey}|${params.value.toLocaleString()} 万元}`;
                },
                rich: {
                    val0: { fontSize: 20, fontWeight: 'bold', color: attaColor[0] },
                    val1: { fontSize: 20, fontWeight: 'bold', color: attaColor[1] },
                    val2: { fontSize: 20, fontWeight: 'bold', color: attaColor[2] }
                }
            }
        },
        {
            type: 'bar',
            data: attaData.map(() => maxValue),
            barWidth: 8,
            barGap: '-100%',
            itemStyle: {
                color: 'rgba(255,255,255,0.08)',
                borderRadius: 6
            },
            z: 1,
            silent: true
        },
        {
            type: 'bar',
            data: attaData.map((v, i) => v * 0.7),
            barWidth: 3,
            barGap: '-100%',
            itemStyle: {
                color: 'rgba(255,255,255,0.3)',
                borderRadius: 6
            },
            z: 3,
            silent: true
        }
    ]
};

const updateChart = () => {
    if (chartInstance) {
        chartInstance.setOption(option);
    }
};

onMounted(() => {
    chartInstance = echarts.init(chartContainer.value);
    updateChart();
    timer = setInterval(updateChart, 1000);
    window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
    if (chartInstance) {
        chartInstance.dispose();
        chartInstance = null;
    }
    clearInterval(timer);
    window.removeEventListener('resize', handleResize);
});

const handleResize = () => {
    if (chartInstance) {
        chartInstance.resize();
    }
};
</script>

<style scoped>
/* 保持原有样式不变 */
.left {
    width: 100% !important;
    height: 100% !important;
    display: flex;
    flex-direction: column;
}

.left-top {
    height: 25%;
    background: url('/homePageImg/tl.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    padding: 0 0 4% 0;
    font-size: 5px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;

}

.left-bottom {
    flex: 1;
}

.chart-container {
    width: 100%;
    height: 100%;
}
</style>